<template>
    <div class="project-detail-box" v-loading="loading">

        <div class="channel-detail">
            <div class="detail-left">
                <h3 class="title">专题内容设置</h3>
                <el-form
                    :model="detail"
                    :rules="rules"
                    ref="detail"
                    :hide-required-asterisk="true"
                    label-width="100px"
                    class="left-form input-no-border-box">
                    <el-form-item label="关联频道" v-if="$route.query.id">
                        <span>{{detail.channelLabel}}</span>
                    </el-form-item>
                    <el-form-item label="专题名称" prop="name">
                        <el-input v-model="detail.title"></el-input>
                    </el-form-item>
                    <el-form-item label="模板" prop="name">
                        <el-select
                            v-model="detail.template"
                            @change="templateChange"
                            placeholder="请选择">
                            <el-option
                                v-for="item in templateList"
                                :key="item.type"
                                :disabled="item.disabled"
                                :label="item.name"
                                :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题" prop="title" v-if="detail.template === 2">
                        <el-input v-model="detail.title"></el-input>
                    </el-form-item>

                    <h4 style="margin-left:30px;margin-bottom:10px;">选择数据：</h4>
                    <el-form-item label="右侧内容" style="margin-bottom: 5px;" v-if="detail.template === 1 || detail.template === 2">
                        <el-radio-group v-model="detail.showButton" @change="showButtonChange">
                            <el-radio :label="1">安装</el-radio>
                            <el-radio :label="0">评分</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="左侧内容" style="margin-bottom: 5px;" v-if="detail.template === 1 || detail.template === 2">
                        <el-radio-group v-model="detail._leftType" @change="_leftTypeChagne">
                            <el-radio :label="1">标题</el-radio>
                            <el-radio :label="2">类型</el-radio>
                            <el-radio :label="3" v-if="detail.showButton === 1">评分</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="banner类型" v-if="detail.template === 2" style="margin-bottom: 5px;">
                        <el-radio-group v-model="detail._contentType" @change="_contentTypeChange">
                            <el-radio :label="1">图片</el-radio>
                            <el-radio :label="2">视频</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="填充内容" v-if="detail.template === 4 || detail.template === 5" style="margin-bottom: 5px;">
                        <el-radio-group v-model="detail._contentType" @change="_contentTypeChange">
                            <el-radio :label="3">富文本</el-radio>
                            <el-radio :label="4">链接</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>

                <!-- 循环拖拽 -->
                <div v-if="detail.template === 1 || detail.template === 2">
                    <div
                        v-for="(item, index) in detail.elements"
                        v-dragging="{ item: item, list: detail.elements}"
                        :key="index">
                        <el-form
                            :model="item"
                            :rules="itemRules"
                            :ref="'item' + index"
                            :hide-required-asterisk="true"
                            class="input-no-border-box"
                            label-width="0px">
                            <el-card shadow="hover" class="drag-items-box">
                                <div class="for-btn-box">
                                    <div class="left-btn">
                                        <!-- 单个关联游戏 -->
                                        <el-button size="small" type="warning" @click="checkGame ('one', item)">{{item.gameid ? '更换' : '关联'}}游戏</el-button>
                                    </div>

                                    <div class="del-btn" @click="delCard(item, index)">删除</div>
                                </div>

                                <div class="for-from-box">
                                    <div>
                                        <b class="for-item-title">游戏名称</b>
                                        <span class="for-item-content item-btn" @click="goGameDetail(item.gameid)">{{item.appName}}</span>

                                        <template v-if="detail._leftType === 1">
                                            <b class="for-item-title">游戏副标题</b>
                                            <span class="for-item-content">{{item.appTitle}}</span>
                                        </template>

                                        <template v-else-if="detail._leftType === 2">
                                            <b class="for-item-title">类型</b>
                                            <span class="for-item-content">{{item.appCategoryName}}</span>
                                        </template>

                                        <template v-if="detail._leftType === 3 || detail.showButton === 0">
                                            <b class="for-item-title">评分</b>
                                            <span class="for-item-content">{{item.appScore}}</span>
                                        </template>
                                    </div>
                                </div>

                                <div class="for-from-box" style="margin-top:10px;">
                                    <template>
                                        <b class="for-item-title">图标</b>
                                        <div class="for-item-icon">
                                            <img :src="item.appIcon" alt="">
                                        </div>
                                    </template>

                                    <template v-if="detail.template === 2">
                                        <template v-if="detail._contentType === 2">
                                            <b class="for-item-title">视频</b>
                                            <el-form-item prop="url">
                                                <videoBox :url="item.url" :time="item.duration" :img="item.cover"/>
                                                <div class="check-video-btn"><span @click="checkVideo(item)">选择视频</span></div>
                                            </el-form-item>
                                        </template>
                                        <template v-else>
                                            <b class="for-item-title">banner</b>
                                            <el-form-item prop="content">
                                                <uploadCutOwnImg v-model="item.content" :width="1080" :height="528"/>
                                                <div class="check-video-btn" style="width:205px;"><span @click="checkBanner(item)">选择banner</span></div>
                                            </el-form-item>
                                        </template>
                                    </template>
                                </div>
                            </el-card>
                        </el-form>
                    </div>
                </div>
                <!-- 富文本 -->
                <div v-else>
                    <div
                        v-for="(item, index) in detail.elements"
                        :key="index">
                        <div v-show="item.type === 3">
                            <uploadVideo @change="changeVideo" :noCover="true"  style="margin-bottom:10px;"/>
                            <div class="editor-tools">
                                <div class="editor-tools-items" @click="editorAddTitle">
                                    <el-tooltip class="item" effect="dark" content="添加标题" placement="top">
                                        <span class="edior-items-title">T</span>
                                    </el-tooltip>
                                </div>
                                <div class="editor-tools-items" @click="checkGame ('one', item, true)">
                                    <el-tooltip class="item" effect="dark" content="添加游戏" placement="top">
                                        <span class="edior-items-title">G</span>
                                    </el-tooltip>
                                </div>
                                <div class="editor-tools-items" @click="editorAdddesc">
                                    <el-tooltip class="item" effect="dark" content="添加图片描述" placement="top">
                                        <span class="edior-items-title">D</span>
                                    </el-tooltip>
                                </div>
                                <div class="editor-tools-items">
                                    <el-tooltip class="item" effect="dark" content="添加头图" placement="top">
                                        <el-upload
                                            class="avatar-uploader"
                                            action="/admin/file/uploadPic"
                                            :data="{
                                                needTransform: 1
                                            }"
                                            :show-file-list="false"
                                            accept=".jpg,.jpeg,.png"
                                            :on-success="editorAddImg">
                                            <div>
                                                <i class="el-icon-picture"></i>
                                            </div>
                                        </el-upload>
                                    </el-tooltip>
                                    <!-- <span class="edior-items-title">D</span> -->
                                </div>
                            </div>
                            <div :id="'editor' + index"></div>
                        </div>
                        <div v-show="item.type === 4">
                            <el-input v-model="item.content" placeholder="请输入链接地址"></el-input>
                        </div>
                    </div>
                </div>

                <!-- 关联所有 -->
                <div style="margin-bottom: 20px;margin-left:10px;"  v-if="detail.template === 1 || detail.template === 2">
                    <!-- 单个关联游戏 -->
                    <el-button size="small" type="warning" @click="checkGame ('some')">添加游戏</el-button>
                    <el-button size="small" type="warning" @click="checkGame ('all')">替换{{detail.elements.length}}条游戏</el-button>
                </div>
            </div>
            <div class="detail-right m-e-detail-box">
                <div class="right-fiexd">
                    <h3 class="title">样式展示</h3>
                    <div class="right-box">
                        <template v-if="detail.template === 4 || detail.template === 5">
                            <div v-for="(item, index) in detail.elements" :key="index">
                                <div v-html="item.content" v-if="item.type === 3"></div>
                                <div v-else><a :href="item.content" target="_blank">{{item.content}}</a></div>
                                <div class="m-e-bottom-line" v-if="detail.template === 5 && item.type === 3">
                                    <div class="m-e-bottom-line-item"></div>
                                    <div class="m-e-bottom-point-item"></div>
                                    <div class="m-e-bottom-line-item"></div>
                                </div>
                            </div>
                        </template>
                        <template v-if="detail.template === 1">
                            <div v-for="(item, index) in detail.elements" :key="index">
                                <moduleGameBar :data="item" :showTitle="detail.showTitle" :showCategory="detail.showCategory" :showButton="detail.showButton"/>
                            </div>
                            <div v-if="!detail.elements.length">
                                <moduleGameBar :data="{}" :showTitle="detail.showTitle" :showCategory="detail.showCategory" :showButton="detail.showButton"/>
                                <moduleGameBar :data="{}" :showTitle="detail.showTitle" :showCategory="detail.showCategory" :showButton="detail.showButton"/>
                                <moduleGameBar :data="{}" :showTitle="detail.showTitle" :showCategory="detail.showCategory" :showButton="detail.showButton"/>
                            </div>
                        </template>
                        <template v-else-if="detail.template === 2">
                            <model3000 :data="detail"/>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <div class="tools">
            <el-button @click="close" class="btn">返回</el-button>
            <el-button type="success" class="btn save-btn" @click="saveProject" v-if="detail.topicid">保存</el-button>
            <el-button type="success" class="btn save-btn" @click="creatProject" v-else>新建</el-button>
        </div>

        <el-dialog
            title="游戏列表"
            :visible.sync="showGameList"
            width="80%">
            <checkGame :type="gameBoxType" @updateGame="updateGame" @close="showGameList = false" :disabledList="disabledList"/>
        </el-dialog>

        <el-dialog
            title="视频列表"
            class="index-show-list"
            :visible.sync="showVideoList"
            width="900px">
            <videoListBox v-if="showVideoList" :gameName="currentGameName" @check="videoCheck"/>
        </el-dialog>

        <el-dialog
            title="banner列表"
            class="index-show-list"
            :visible.sync="showImgList"
            width="900px">
            <imgListBox v-if="showImgList" :gameName="currentGameName" @check="imgCheck"/>
        </el-dialog>
    </div>
</template>

<script>
import videoListBox from '../checkVideoList'
import imgListBox from '../checkImgList'
import E from 'wangeditor'
// import E from './wangEditor'

export default {
    data () {
        return {
            detail: {
                topicid: null,
                title: '',
                template: 1,
                showTitle: 1,
                showCategory: 0,
                showScore: 1,
                showButton: 0,
                createTime: null,
                updateTime: null,
                creator: null,
                channelDisplayType: '',
                channelLabelType: null,
                channelLabel: '',
                channelRemark: '',
                channelStatus: 0,
                channelStartTime: null,
                channelEndTime: null,
                elements: [],
                _timers: [],
                _leftType: 1,
                _contentType: 1
            },
            templateList: [
                { name: '游戏列表', type: 1, disabled: false },
                { name: 'banner系列', type: 2, disabled: false },
                // { name: '游戏资讯', type: 4, disabled: false }
                { name: '游戏资讯', type: 5, disabled: false }
            ],
            disabledList: [], // 禁止重复选中的列表
            loading: false, // 详情加载loading
            showGameList: false, // 获取游戏列表
            gameBoxType: 'one', // 更换一个one 添加 多个some 替换all
            rules: {
            },
            itemRules: {},
            currentGameName: '', // 默认查询的游戏名称
            showVideoList: false, // 是否展示视频列表
            showImgList: false // 是否展示banner列表
        }
    },
    created () {
    },
    mounted () {
        if (this.$route.query.id) {
            this.getDetail()
        } else {
            this.dataInit(this.detail)
        }
    },
    methods: {
        // 获取详情
        async getDetail () {
            if (this.loading) return
            this.loading = true
            let params = {
                id: this.$route.query.id
            }
            let res = await this.$http.post('/home/topicsDetail', params)
            if (res.code === '0') {
                this.dataInit(res.data)
                this.detail = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 初始化数据
        dataInit (obj) {
            if (obj.topicid) {
                if (obj.template === 1 || obj.template === 2) {
                    this.templateList[2].disabled = true
                    // this.templateList[3].disabled = true
                } else {
                    this.templateList[0].disabled = true
                    this.templateList[1].disabled = true
                    this.$nextTick(() => {
                        this.detail.elements.forEach((item, index) => {
                            this.createEditor(item, index)
                        })
                        this.iscreateEditor = true
                    })
                }
            }
            if (obj.elements.length) {
                obj._routerType = obj.elements[0].routeType
                if (obj.elements[0].type) {
                    obj._contentType = obj.elements[0].type
                } else {
                    obj._contentType = 1
                }
            } else {
                obj._contentType = 1
                obj._routerType = 0
            }

            // 左侧类型
            let leftType = 1
            // 显示标题
            if (obj.showTitle === 1) {
                leftType = 1
                // 显示类型
            } else if (obj.showCategory === 1) {
                leftType = 2
            } else {
                if (obj.showButton === 1) {
                    leftType = 1
                } else {
                    leftType = 3
                }
            }
            obj._leftType = leftType

            if (obj.startDate && obj.endDate) {
                obj._timers = [obj.startDate, obj.endDate]
            }
        },

        templateChange (val) {
            if (!this.detail.topicid) {
                if (val === 1 || val === 2) {
                    this.detail.elements = []
                    this.iscreateEditor = false
                } else {
                    if (this.iscreateEditor) return
                    this.detail.elements = [
                        {
                            appDownloadUrl: '',
                            appIcon: '',
                            appName: '',
                            appPackage: '',
                            appRoute: null,
                            appScore: null,
                            appTitle: '',
                            bannerRoute: null,
                            button: null,
                            buttonRoute: null,
                            celeid: null,
                            channelid: null,
                            content: '',
                            cover: null,
                            gameid: null,
                            routeType: 0,
                            sort: null,
                            topicTitle: null,
                            topicid: null,
                            type: 3,
                            url: ''
                        }
                    ]
                    this.detail._contentType = 3
                    this.$nextTick(() => {
                        this.detail.elements.forEach((item, index) => {
                            this.createEditor(item, index)
                        })
                        this.iscreateEditor = true
                    })
                }
            }
        },
        // 初始化富文本编辑器
        createEditor (item, index) {
            this.editor = new E('#editor' + index)
            this.editor.customConfig.uploadImgServer = '/admin/file/uploadPic'
            this.editor.customConfig.uploadImgParams = {
                needTransform: 1
            }
            this.editor.customConfig.uploadFileName = 'file'
            this.editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
                },
                success: function (xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                error: function (xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
                timeout: function (xhr, editor) {
                // 图片上传超时时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },

                // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                    // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                    var url = result.data
                    insertImg(url)

                // result 必须是一个 JSON 格式字符串！！！否则报错
                }
            }
            this.editor.customConfig.zIndex = 100
            this.editor.customConfig.menus = [
                // 'head', // 标题
                'bold', // 粗体
                // 'fontSize', // 字号
                // 'fontName', // 字体
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                // 'list', // 列表
                'justify', // 对齐方式
                // 'quote', // 引用
                // 'emoticon', // 表情
                'image', // 插入图片
                // 'table', // 表格
                // 'video', // 插入视频
                // 'code', // 插入代码
                'undo', // 撤销
                'redo' // 重复
            ]
            this.editor.customConfig.onchange = (html) => {
                // html 即变化之后的内容
                // if (!html.includes('padding:16px')) {
                //     html = `<div style="padding:16px 16px 0 16px;">${html}<div>`
                // }
                item.content = html
            }
            this.editor.create()
            this.editor.txt.html(item.content)
        },

        changeVideo (url, duration, storageid, cover) {
            this.editor.cmd.do('insertHTML', `<iframe src="${url}" style="width:100%;" frameborder="0"></iframe>`)
        },

        editorAddTitle () { // h1
            this.editor.cmd.do('insertHTML', `<h1 class="m-e-title">我是标题</h1>`)
        },

        editorAddGame (item) { // h5
            // http://static-qugame.admore.com/static/images/b4f9e74b2bc242c99cbe8a14f746112b.png
            this.editor.cmd.do('insertHTML', `
                <h5 class="m-e-hidden" style="text-align:center;">-----游戏不可编辑只可删除----</h5>
                <div class="m-e-game-box" contenteditable="false" data-gameId="${item.gameid || ''}" data-package="${item.appPackage || ''}" data-downUrl="${item.appDownloadUrl || ''}">
                    <div class="m-e-game-icon">
                        <img src="${item.appIcon}" alt="">
                    </div>
                    <div class="m-e-game-content">
                        <div class="m-e-game-title">${item.appName || ''}</div>
                        <div class="m-e-game-score">
                            <div class="m-e-game-score-icon"></div>
                            <div class="m-e-game-score-num">${item.appScore || '0'}</div>
                        </div>
                        <div class="m-e-game-desc">${item.appTitle || ''}</div>
                    </div>
                    <div class="m-e-game-btn" data-gameId="${item.gameid || ''}" data-package="${item.appPackage || ''}" data-downUrl="${item.appDownloadUrl || ''}">打开</div>
                </div>
                <h5 class="m-e-hidden" style="text-align:center;">-----游戏不可编辑只可删除----</h5>
                `)
            // <h2 class="m-e-hidden" style="text-align:center;">-----以下不要修改----</h2>

            // setTimeout(() => {
            //     this.editor.cmd.do('insertHTML', `<p>我是文字</p>`)
            // }, 0)
        },

        editorAddImg (res, file) { // h3
            if (res.code === '0') {
                this.editor.cmd.do('insertHTML', `<h3 class="m-e-banner"><img style="width:100%;" src="${res.data}" alt=""></h3>`)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        editorAdddesc () { // h4
            this.editor.cmd.do('insertHTML', `<h4 class="m-e-desc">我是图片描述</h4>`)
        },

        // 提交数据初始化
        submitInit () {
            let subObj = JSON.parse(JSON.stringify(this.detail))
            delete subObj._contentType
            delete subObj._leftType
            delete subObj._routerType
            delete subObj._timers
            return subObj
        },

        // 关闭详情页
        close () {
            this.$router.go(-1)
        },

        async saveProject () {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.post('/home/updateTopic', this.submitInit())
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '修改成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        async creatProject () {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.post('/home/addTopic', this.submitInit())
            if (res.code === '0') {
                this.detail.topicid = res.data.topicid
                // 初始化模板选择
                if (this.detail.template !== 3) {
                    this.templateList[2].disabled = true
                    // this.templateList[3].disabled = true
                } else {
                    this.templateList[0].disabled = true
                    this.templateList[1].disabled = true
                }
                if (this.$route.query.from === 'channelDetail') {
                    window.localStorage.setItem('newChannel', JSON.stringify(res.data))
                    this.$router.go(-1)
                }
                this.$message({
                    type: 'success',
                    message: '保存成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 关联游戏按钮
        checkGame (type, item, editorCheckGame) {
            this.editorCheckGame = editorCheckGame
            this.gameBoxType = type
            this.currentItem = item
            if (type === 'all') {
                this.disabledList = []
            } else {
                this.disabledList = [...this.detail.elements]
            }
            this.showGameList = true
        },

        delCard (item, index) {
            this.detail.elements.splice(index, 1)
        },

        updateGame (list) {
            if (this.editorCheckGame) {
                this.editorAddGame(...list)
                return
            }
            list.forEach(item => {
                item.type = this.detail._contentType
            })
            if (this.gameBoxType === 'one') {
                let listItem = list[0]
                this.currentItem.appCategory = listItem.appCategory
                this.currentItem.appCategoryName = listItem.appCategoryName
                this.currentItem.appDownloadUrl = listItem.appDownloadUrl
                this.currentItem.appIcon = listItem.appIcon
                this.currentItem.appName = listItem.appName
                this.currentItem.appPackage = listItem.appPackage
                this.currentItem.appTitle = listItem.appTitle
                this.currentItem.appScore = listItem.appScore
                this.currentItem.gameid = listItem.gameid
            } else if (this.gameBoxType === 'some') {
                this.detail.elements.push(...list)
            } else {
                this.detail.elements = list
            }
        },

        showButtonChange (val) {
            if (val === 0 && this.detail._leftType === 3) {
                this.detail._leftType = 1
                this.detail.showTitle = 1
            }
            this.detail.showScore = val === 1 ? 0 : 1
        },
        _leftTypeChagne (val) {
            // 如果左侧是标题
            if (val === 1) {
                this.detail.showTitle = 1
                this.detail.showCategory = 0
            // 左侧是类型
            } else if (val === 2) {
                this.detail.showTitle = 0
                this.detail.showCategory = 1
            // 左侧是评分
            } else if (val === 3) {
                this.detail.showTitle = 0
                this.detail.showScore = 1
                this.detail.showCategory = 0
            }
        },
        _contentTypeChange (val) {
            this.detail.elements.forEach(item => {
                item.type = val
                if (val === 3 || val === 4) {
                    item.content = ''
                }
            })
        },

        // 选择banner
        checkBanner (item) {
            this.currentItem = item
            this.currentGameName = item.appName
            this.showImgList = true
        },

        imgCheck (item) {
            this.currentItem.content = item.url
            this.refresh()
            this.showImgList = false
        },

        // 选择视频
        checkVideo (item) {
            // this.currentVideoIndex = index
            this.currentItem = item
            this.currentGameName = item.appName
            this.showVideoList = true
        },

        videoCheck (item) {
            this.currentItem.content = item.url
            this.currentItem.cover = item.cover
            this.currentItem.duration = item.duration
            this.refresh()
            this.showVideoList = false
        },

        // 查看游戏详情
        goGameDetail (id) {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },

        refresh () {
            this.detail = JSON.parse(JSON.stringify(this.detail))
        }
    },
    components: {
        videoListBox,
        imgListBox
    }
}
</script>

<style lang="scss" scoped>
    .channel-detail {
        display: flex;
        padding: 10px;
        .detail-left, .detail-right {
            .title {
                text-align: center;
            }
        }
        .detail-left {
            flex: 1;
            .left-form {
                margin-top: 10px;
            }
            .drag-items-box {
                margin-bottom: 10px;
                /deep/ .el-card__body {
                    padding: 10px;
                }
            }
            .for-btn-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10px;
                .left-btn {
                }
                .del-btn {
                    font-size: 13px;
                    color: red;
                    cursor: pointer;
                    &:hover {
                        opacity: .8;
                        text-decoration: underline;
                    }
                }
            }
            .editor-tools {
                background-color: #f1f1f1;
                border: 1px solid #ccc;
                border-bottom: none;
                height: 32px;
                padding: 0 5px;
                display: flex;
                .editor-tools-items {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 32px;
                    cursor: pointer;
                    color: #999999;
                    &:hover .edior-items-title {
                        color: #000000;
                    }
                    &:hover i {
                        color: #000000;
                    }
                    .edior-items-title {
                        font-size: 20px;
                    }
                }
             }

            .project-content {
                font-size: 13px;
                margin-left: 5px;
            }
            .for-from-box {
                display: flex;
                .for-item-title {
                    font-size: 14px;
                    line-height: 40px;
                    padding: 0 10px;
                }
                .for-item-content {
                    font-size: 14px;
                    line-height: 40px;
                }
                .item-btn {
                    font-size: 13px;
                    color: #409EFF;
                    cursor: pointer;
                    &:hover {
                        opacity: .8;
                        text-decoration: underline;
                    }
                }

                .for-item-icon {
                    width: 60px;
                    height: 60px;
                    > img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .check-video-btn {
                width: 160px;
                margin-top: 10px;
                text-align: center;
                font-size: 12px;
                color: #409EFF;
                line-height: 12px;
                cursor: pointer;
                &:hover {
                    opacity: .8;
                    text-decoration: underline;
                }
            }
        }
        .detail-right {
            width: 400px;
            .right-fiexd {
                width: 100%;
                position: sticky;
                top: 10px;
                left: 0;
                z-index: 1;
                .right-box {
                    border: 1px solid #ccc;
                    width: 362px;
                    margin: 0 auto;
                    height: 642px;
                    overflow: scroll;
                    > div {
                        border: none;
                    }
                }
            }
        }
    }
    .tools {
        margin-top: 20px;
        padding-bottom: 20px;
        display: flex;
        justify-content: center;
        .save-btn {
            margin-left: 200px;
        }
        .btn {
            width: 150px;
            padding: 10px;
        }
    }

    .index-show-list {
        /deep/ .el-dialog__body {
            padding: 0 20px 20px;
        }
    }
</style>

<style lang="scss">
    .m-e-title {
        padding: 16px 16px;
        text-align: center;
        font-size:18px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(44,44,44,1);
        line-height:25px;
    }

    .m-e-desc {
        margin: 12px 16px 20px;
        padding-left: 8px;
        border-left: 3px solid #00BF3C;
        font-size:13px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(160,160,160,1);
    }
    .m-e-banner {
        width: 100%;
    }
    .m-e-game-box {
        margin: 24px 16px;
        height:80px;
        background:rgba(255,255,255,1);
        box-shadow:0px 6px 11px -4px rgba(0,0,0,0.07);
        border-radius:12px;
        border:1px solid rgba(226,228,237,1);
        padding: 12px!important;
        display: flex;
        align-items: center;
        .m-e-game-icon {
            width: 56px;
            height: 56px;
            border-radius:12px;
            background-color: pink;
            > img {
                width: 100%;
                height: 100%;
            }
        }

        .m-e-game-content {
            flex: 1;
            margin: 0 8px;
            .m-e-game-title {
                height: 14px;
                font-size: 14px;
                font-family: SourceHanSansCN-Medium,SourceHanSansCN;
                font-weight: 500;
                color:rgba(28,32,44,1);
                line-height: 14px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                max-width: 160px;
            }
            .m-e-game-score {
                margin-top: 8px;
                display: flex;
                align-items: center;
                .m-e-game-score-icon {
                    width: 10px;
                    height: 10px;
                    background-image: url('http://static-qugame.admore.com/static/images/b4f9e74b2bc242c99cbe8a14f746112b.png');
                    background-size: 100% 100%;
                    margin-right: 2px;
                }
                .m-e-game-score-num {
                    height:12px;
                    font-size:12px;
                    font-family:Roboto-BoldItalic,Roboto;
                    font-weight:normal;
                    color:rgba(0,191,60,1);
                    line-height:12px;
                }
            }
            .m-e-game-desc {
                margin-top: 6px;
                height:11px;
                font-size:11px;
                font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                font-weight:400;
                color:rgba(60,66,93,1);
                line-height:11px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                max-width: 160px;
            }
        }

        .m-e-game-btn {
            width:64px;
            height:24px;
            border-radius:4px;
            border:1px solid rgba(0,191,60,1);
            font-size:14px;
            font-family:SourceHanSansCN-Regular,SourceHanSansCN;
            font-weight:400;
            color:rgba(0,191,60,1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform .5 ease;
            &:active {
                transform: scale(.95);
            }
        }
    }

    .m-e-bottom-line {
        padding: 39px 16px 33px;
        display: flex;
        align-items: center;
        .m-e-bottom-line-item {
            flex: 1;
            height: 1px;
            background-color: #DCDCDC;
        }
        .m-e-bottom-point-item {
            width: 3px;
            height: 3px;
            margin: 0 7px;
            background-color: #DCDCDC;
            border-radius: 50%;
        }
    }

    .m-e-detail-box {
        p {
            padding: 0 16px;
            font-size:14px;
            font-family:PingFangSC-Light,PingFang SC;
            font-weight:300;
            color:rgba(72,72,72,1);
            line-height:26px;
        }
        img {
            // margin: 0 16px;
        }
        .m-e-hidden {
            display: none;
        }
    }
</style>
